@charset "UTF-8";
@import"module";


*{
  margin: 0;
  padding: 0;
}

body{
  background-color: $main-color;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: #68cdd5;
  z-index: 2;
  color: white;
  padding: $retract-header 0;

  & a{
  display: flex;
  }

.father img{
  width: 15px;
  height: 23px;
  padding-left:$gap-return;
}
  }

.double{height:43px; }



.graphic{
  position: relative;
  height: 11rem;
  background-image: url("pjt.png");
  background-size:100% 100%;
  z-index: 1;
  color: white;
  display: flex;
  align-items: center;

  & >img{
    width: 86px;
    padding:0  $gap-head-left;
  }
  .broadside{
    display: compact;
  }

  .pitch>img{
    width: 12px;
    height: 14px;
  }
  .site{font-size: 13px;
  }
  }

.main{
  padding: $gap-list 0;
  border-bottom: {
    width: 1px;
    style: solid;
    color: $color-bottom-line;
  }

  .row-text{
    display: flex;
    align-items: center;
  }

  .before{
    border-left: 1px solid #5fc0cd;
    padding-left: 10px;
    margin-left: 30px;
    height: 12px;
  }

}

.container {
  margin-left: $left-main-gap;

  .life {
    @extend .main
  }
  .life span{
    font-size: 15px;
  }
    & img{
      width:13px;
    }
  .age{
    @extend .life
  }

  .work{
    @extend .main
  }

  .cost {
    @extend .life
  }

}


.home{
  display: inline-block;
  padding-right:$left-right-gap-centre;
  border-right:{
    width: 1px;
    style: solid;
    color: #e1e5e7 ;
  }
  margin-right: $left-right-gap-centre;
}



.age div{
  @extend .home;
  color:$color-font-introduce;
}


.work div{
  @extend .home;
  color:$color-font-introduce; }


.cost div{
  @extend .home;
  color:$color-font-introduce;
  }

.cost span{
  color: #e26163;
  font-weight:bold;
  }

.introduce{
  @extend .main;
  display:flex;
  align-items: center;

}


.introduce div{
  @extend .home;
  margin-left: 29px;
  white-space: nowrap;
  color:$color-font-introduce;
}


.introduce span{
  font-size: 15px;
}




.footer{
  @extend .header;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #f5f6f9;
}


.opposite{
  width: $button-wide;
  text-align: center;
  padding: $button-high 0 ;
  margin-left:$gap-button-side;
  border: {
    width: 1px;
    style: solid;
    color: $font-color;
  }
  border-radius: 7px;
  color: $font-color;  }

.contrary{
  @extend .opposite;
  background:#5fc0cd;
  margin-right:$gap-button-side;
  color: white;
  }